<template>
<div class="remark-head">
  <ul class="remark-head-top clear-fix">
    <li class="remark-head-left">
      <span>评论</span>
    </li>
    <li class="remark-head-right">
      <span><strong>{{peo}}</strong>人参与,&nbsp;<strong>{{comm}}</strong>条评论</span>
    </li>
  </ul>
  <div class="remark-head-bottom">
    <span>最新评论</span>
  </div>
</div>
</template>

<script>
export default{
  name: 'remarkhead',
  data () {
    return {
      peo: 95,
      comm: 40
    }
  }
}
</script>

<style scoped>
.remark-head{
   margin: 50px 2px 2px 2px;
   position: relative;
   width: 100%;
}
.remark-head span{
  font-size: 16px;
  color: #e76060;
}
.remark-head-top{
  padding: 5px 5px 0;
  border-bottom: 1px solid #e76060;
}
.remark-head-bottom{
  padding: 20px 0 10px;
}
.remark-head-bottom span{
  padding-left: 20px;
  border-left: 5px solid #e76060;
}
.remark-head-left{
  position: absolute;
  top: 10px;
  padding: 10px;
  border: 1px solid #e76060;
  border-radius: 10px;
}
.remark-head-left::after{
  content: '';
  position: absolute;
  left: -8px;
  top: 33px;
  width: 60px;
  height: 14px;
  background-color: #f1f1f1;
  z-index: 9;
}
.remark-head-right{
  float: right;
  padding: 10px;
}
</style>
